<template>
  <view class="more-service-container">
    <!-- 服务面板标题 -->
    <view class="service-title">
      <text>{{ title || '更多服务' }}</text>
    </view>
    
    <!-- 服务项目网格布局 -->
    <view class="service-grid">
      <view 
          v-for="(item, index) in displayList" 
          :key="index"
          class="service-item"
          @tap="handleItemClick(item)"
          :hover-class="'service-item-hover'"
          :active-class="'service-item-active'"
        >
          <!-- 服务图标 -->
          <view class="service-icon">
            <text :class="['iconfont', item.icon]"></text>
          </view>
          <!-- 服务名称 -->
          <text class="service-name">{{ item.name }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed, ref } from 'vue'

// 确保在页面中引入了iconfont样式
// 可以在App.vue或页面中全局引入: @import './assets/iconfont/iconfont.css';

// 定义组件属性
const props = defineProps({
  // 面板标题
  title: {
    type: String,
    default: '更多服务'
  },
  // 服务列表数据
  serviceList: {
    type: Array,
    default: () => []
  },
  // icon颜色
  iconColor: {
    type: String,
    default: '#333333'
  }
})

// 防止重复点击
const isClicking = ref(false)

// 获取显示的服务列表（优先使用传入的数据，若无则使用默认数据）
const displayList = computed(() => {
  // 如果传入了服务列表数据且不为空，则使用传入的数据
  if (props.serviceList && props.serviceList.length > 0) {
    return props.serviceList;
  }
  // 否则使用默认的服务列表数据
  return getDefaultServiceList();
})

// 获取默认服务列表数据
function getDefaultServiceList() {
  return [
    {
      title: '活动中心',
      icon: 'icon-activity-center',
      name: '活动中心',
      link: '/activity-center'
    }
  ]
}

// 处理服务项点击
function handleItemClick(item) {
  if (isClicking.value) return
  
  // 记录当前点击的项目索引
  const currentItem = item
  
  isClicking.value = true
  
  // 添加震动反馈（如果设备支持）
  if (uni.vibrateShort) {
    uni.vibrateShort({
      type: 'light'
    })
  }
  
  // 执行跳转逻辑
  navigateTo(currentItem.link)
  
  // 模拟点击延迟，防止快速重复点击
  setTimeout(() => {
    isClicking.value = false
  }, 300)
}

// 跳转方法
function navigateTo(link) {
  if (!link) {
    console.warn('链接为空，无法跳转')
    return
  }

  
  // 尝试不同的跳转方法
  const navigateMethods = [
    (url) => uni.navigateTo({ url }),
    (url) => uni.redirectTo({ url }),
    (url) => uni.switchTab({ url }),
    (url) => uni.reLaunch({ url })
  ]
  
  // 尝试不同的跳转方式
  let methodIndex = 0
  
  function tryNextMethod() {
    if (methodIndex >= navigateMethods.length) {
      uni.hideLoading()
      console.error('所有跳转方法均失败')
      uni.showToast({
        title: '页面不存在或无法跳转',
        icon: 'none',
        duration: 2000
      })
      return
    }
    
    const method = navigateMethods[methodIndex]
    methodIndex++
    
    try {
      method(link)
      // 成功跳转后隐藏加载提示
      setTimeout(() => {
        uni.hideLoading()
      }, 500)
    } catch (error) {
      console.warn(`跳转方法${methodIndex}失败:`, error)
      tryNextMethod()
    }
  }
  
  tryNextMethod()
}
</script>

<style lang="scss" scoped>
.more-service-container {
  padding: 10px 16px;
  background-color: #ffffff;
  margin: 40rpx 0;
}

.service-title {
  font-size: 17px;
  font-weight: 600;
  color: #333333;
  margin-bottom: 20px;
  padding-left: 4px;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
  border-radius: 8px;
  transition: all 0.2s ease;
  position: relative;
}

.service-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f7f7f7;
  border-radius: 50%;
  margin-bottom: 12px;
}

.service-icon text {
  font-size: 28px;
  color: v-bind(iconColor);
}

.service-name {
  font-size: 13px;
  color: #333333;
  text-align: center;
  line-height: 1.5;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

// 点击和悬停效果
.service-item-hover {
  background-color: #f8f8f8;
}

.service-item-active {
  background-color: #f0f0f0;
  transform: scale(0.98);
  transition: transform 0.1s ease;
}

// 响应式布局 - 平板设备
@media (min-width: 768px) and (max-width: 1024px) {
  .service-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
  }
  
  .service-icon {
    width: 64px;
    height: 64px;
  }
  
  .service-icon text {
    font-size: 32px;
  }
  
  .service-name {
    font-size: 14px;
  }
}

// 响应式布局 - 大屏幕
@media (min-width: 1025px) {
  .more-service-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
  }
  
  .service-title {
    font-size: 18px;
    margin-bottom: 24px;
  }
  
  .service-grid {
    grid-template-columns: repeat(7, 1fr);
    gap: 28px;
  }
  
  .service-icon {
    width: 72px;
    height: 72px;
  }
  
  .service-icon text {
    font-size: 36px;
  }
  
  .service-name {
    font-size: 15px;
  }
}

// 响应式布局 - 小屏幕适配
@media (max-width: 480px) {
  .service-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  
  .service-icon {
    width: 52px;
    height: 52px;
  }
  
  .service-icon text {
    font-size: 26px;
  }
  
  .service-name {
    font-size: 12px;
  }
}

// 更小屏幕适配 - 手机竖屏
@media (max-width: 360px) {
  .more-service-container {
    padding: 16px 12px;
  }
  
  .service-title {
    font-size: 16px;
    margin-bottom: 16px;
  }
  
  .service-grid {
    gap: 12px;
  }
  
  .service-item {
    padding: 12px 0;
  }
  
  .service-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 8px;
  }
  
  .service-icon text {
    font-size: 24px;
  }
}

// 超小屏幕适配 - 小屏手机
@media (max-width: 320px) {
  .service-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  
  .service-icon {
    width: 44px;
    height: 44px;
  }
  
  .service-icon text {
    font-size: 22px;
  }
  
  .service-name {
    font-size: 11px;
  }
}
</style>